﻿@model StudyEnglish.Models.DictionaryModel.TypedDictionary

@{
    var tableName = "datatable" + ((int) Model.DictType);
    var oTableName = "oTable" + ((int)Model.DictType);
    
}

<table cellpadding="0" cellspacing="0" border="0" class="display" id="@tableName" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th align="left" width="250px">Name</th>
            <th align="left">Description</th>
            <th align="left">Key</th>
            <th align="right" width="100px"></th>
        </tr>
    </thead>
    <tbody>
        
            @foreach(var item in Model.Items)
            {
                <text>
                    <tr id="@item.Id">
                        <td>@item.Id</td>
                        <td>@item.Name</td>
                        <td>@item.Descr</td>
                        <td>@item.Key</td>
                        <td align="right">Delete</td>
                    </tr>
                </text>
            }
        
    </tbody>
</table>


<script type="text/javascript">
    
    $(document).ready(function () {
    
        var @(oTableName) = $('#@tableName').dataTable({
            "bProcessing": true,
//            "bFilter": false,
            "bLengthChange": false,
            "bStateSave": true,
//            "bServerSide": true,
            "iDisplayLength": 30,
                
            "aoColumnDefs": [
                    { "bVisible": false, "aTargets": [0] }
                ],
             "aoColumns": [
                     {},
                     {},
                     {},
                    {},
                     { "mDataProp": null }],
            "oLanguage": {
                "sSearch": ""
            }
        });
        
        @(oTableName).$('td').editable('../../Dictionary/UpdateElement', {
            "callback": function (sValue, y) {
                var aPos = @(oTableName).fnGetPosition(this);
                @(oTableName).fnUpdate(sValue, aPos[0], aPos[1]);
            },
            "submitdata": function (value, settings) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": @(oTableName).fnGetPosition(this)[2]
                };
            },
            "height": "20px",
            "width": "80%"
        });
    });

        
</script>